<!DOCTYPE html>
<html lang="en" class="js">
<head>
    <meta charset="UTF-8">
    <title>Translator</title>
    <meta name="viewport" content="initial-scale=1.0, width=device-width" />

    <!-- Style Sheets -->
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="css/jquery.bxslider.css">
    <link rel="stylesheet" href="css/hover-min.css" />
    <link rel="stylesheet" href="css/bootstrap-select.min.css" />
    <link rel="stylesheet" href="css/animate.css" />
    <link rel="stylesheet" type="text/css" href="css/loader.css">
    <link href="css/prettyPhoto.css" rel="stylesheet" type="text/css" />

    <link rel="stylesheet" type="text/css" href="css/styles.css">
    <link rel="stylesheet" type="text/css" href="css/responsive.css">
    <script src="https://unpkg.com/franc-min"></script>
    <meta name="csrf-token" content="{{ csrf_token() }}"/>

    <script>(function(e,t,n){var r=e.querySelectorAll("html")[0];r.className=r.className.replace(/(^|\s)no-js(\s|$)/,"$1js$2")})(document,window,0);</script>

</head>
<body>
<!-- Loader -->
<div id="loader">
    <h1 class="loader">
        <span class="loaderTxt let1">T</span>
        <span class="loaderTxt let2">r</span>
        <span class="loaderTxt let3">a</span>
        <span class="loaderTxt let4">n</span>
        <span class="loaderTxt let5">s</span>
        <span class="loaderTxt let6">l</span>
        <span class="loaderTxt let7">a</span>
        <span class="loaderTxt let8">t</span>
        <span class="loaderTxt let9">o</span>
        <span class="loaderTxt let10">r</span>
    </h1>
</div>
<!-- Loader -->

<!-- TopBar -->

<!-- <section id="topbar">
    <div class="container">
        <div class="row">
            <div class="col-sm-9">
                <div class="top-menu">
                    <ul class="list-unstyled list-inline">
                        <li><a data-hover="Home" href="index.html">Home</a></li>
                        <li><a data-hover="About" href="about.html">About</a></li>
                        <li><a data-hover="Blog" href="blog.html">Blog</a></li>
                        <li><a data-hover="Support" href="#">Support</a></li>
                        <li><a data-hover="Help" href="#">Help</a></li>
                    </ul>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="user-acces pull-right">
                    <a href="login.html">Login</a>
                    <span>&#47;</span>
                    <a href="register.html">Register</a>
                </div>
            </div>
        </div>
    </div>
</section>
 -->

<!-- TopBar -->

<!-- Main-Navigation -->

<section id="main-navigation">
    <div id="navigation">
        <nav class="navbar navbar-default" role="navigation">
            <div class="container">
                <div class="row">
                    <!--  Brand and toggle get grouped for better mobile display -->
                    <div class="col-md-3 col-sm-12 col-xs-12">
                        <div class="navbar-header">

                            <a class="navbar-brand logo col-xs-10" href="index.html">
                                <img src="images/logo.jpg" alt="logo" class="img-responsive">
                            </a>
                            <div class="col-xs-2 text-center">
                                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#fixed-collapse-navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
                            </div>
                        </div>
                    </div>
                    <!--  Collect the nav links, forms, and other content for toggling -->
{{--                    <div class="col-md-9 col-sm-12 col-xs-12 pull-right">--}}
{{--                        <div class="collapse navbar-collapse nav-collapse" id="fixed-collapse-navbar">--}}
{{--                            <ul class="nav navbar-nav cl-effect-1">--}}
{{--                                <li class="active"><a href="index.html" data-hover="Translation">Translation</a> </li>--}}
{{--                                <li><a href="languages.html" data-hover="Languages">Languages</a> </li>--}}
{{--                                <li><a href="services.html" data-hover="Services">Services</a> </li>--}}
{{--                                <li><a href="translators.html" data-hover="Translators">Translators</a> </li>--}}
{{--                                <li><a href="prices.html" data-hover="Prices">Prices</a> </li>--}}
{{--                                <li><a href="contact.html" data-hover="Contact">Contact</a></li>--}}
{{--                            </ul>--}}
{{--                            <div class = "btn-group pull-right translate-dropdown">--}}
{{--                                <button type = "button" class = "btn btn-translate dropdown-toggle" data-toggle = "dropdown">--}}
{{--								      <span class="flag-image">--}}
{{--								      	<img src="images/uk.png" alt="flag">--}}
{{--								      </span>--}}
{{--                                    Eng--}}
{{--                                </button>--}}

{{--                                <ul class = "dropdown-menu" role = "menu">--}}
{{--                                    <li>--}}
{{--                                        <a href = "#">--}}
{{--                                            <img class="trnslate-img" src="images/saudia.png" alt="flag">--}}
{{--                                            Saudi Arabia--}}
{{--                                        </a>--}}
{{--                                    </li>--}}
{{--                                    <li>--}}
{{--                                        <a href = "#">--}}
{{--                                            <img class="trnslate-img" src="images/china.png" alt="flag">--}}
{{--                                            China--}}
{{--                                        </a>--}}
{{--                                    </li>--}}
{{--                                    <li>--}}
{{--                                        <a href = "#">--}}
{{--                                            <img class="trnslate-img" src="images/rusia.png" alt="flag">--}}
{{--                                            Rusia--}}
{{--                                        </a>--}}
{{--                                    </li>--}}
{{--                                </ul>--}}
{{--                            </div>--}}
{{--                        </div>--}}
{{--                    </div>--}}
                </div>
            </div>
        </nav>
    </div>
</section>

<!-- Main-Navigation -->




<!-- Quick Translator -->

<section id="quick-translator">
    <div class="container">
        <div class="row text-center">
            <h1 class="section-heading wow fadeInDown" data-wow-duration="0.5s">智能翻译</h1>
            <p class="section-desc wow fadeIn" data-wow-duration="0.5s">
                免费的翻译服务，可提供多种语言之间的即时翻译，支持任意两种语言之间的字词、句子翻译
            </p>
            <div class="section-seperator">
                <span></span>
            </div>
        </div>
        <div class="row">
            <div id="translator">
                <form class="translation-form">
                    <div class="col-sm-6">
                        <div class="language-bar">
                            <select name="lang-detection" id="lang-detection" class="form-control ">
                                <option value="">原语言</option>
                                <option value="cn">中文</option>
                                <option value="en">英语</option>
                                <option value="jp">日语</option>
                            </select>
                            <button type="button" class="btn btn-swap pull-right" id="change-language">
                                <i class="fa fa-long-arrow-right swap-right"></i>
                                <i class="fa fa-long-arrow-left swap-left"></i>
                            </button>
                        </div>
                        <div class="language-area">
                            <textarea class="form-control wow fadeIn" data-wow-duration="0.5s" name="lang-input" id="lang-input" rows="10"></textarea>
                        </div>
{{--                        <p class="upload-info wow fadeInDown" data-wow-duration="0.5s" data-wow-delay="0.3s">--}}
{{--                            Type text or a website address or--}}
{{--                            <input type="file" name="file-1" id="file-1" class="inputfile inputfile-1" data-multiple-caption="{count} files selected" multiple />--}}
{{--                            <label for="file-1"><span>Upload a Document</span></label>--}}
{{--                        </p>--}}
                    </div>

                    <div class="col-sm-6">
                        <div class="language-bar">
                            <select name="lang-detection" id="outPutLanguage" class="form-control  pull-right">
                                <option value="">目标语言</option>
                                <option value="cn">中文</option>
                                <option value="en">英语</option>
                                <option value="jp">日语</option>
                            </select>
                        </div>
                        <div class="language-area">
                            <textarea class="form-control wow fadeIn" data-wow-duration="0.5s" name="lang-output" id="lang-output" rows="10"></textarea>
                        </div>
                    </div>
                    <div class="clearfix"></div>

                </form>
                <div class="text-center translate-option">
                    <button type="submit" class="btn btn-green btn-instant-translate wow fadeIn" data-wow-duration="0.5s" id="submit" style="padding: 10px 50px">
                        翻译
                    </button>
                    <!-- <a href="#" class="human-translate wow fadeInDown" data-wow-duration="0.5s" data-wow-delay="0.1s">Need Human Translator?</a>-->
                </div>
            </div>
        </div>
    </div>
    <div class="loading-overlay" id="loadingOverlay">
        <div class="grid-container">
            <div class="grid-item"></div>
            <div class="grid-item"></div>
            <div class="grid-item"></div>
            <div class="grid-item"></div>
            <div class="grid-item"></div>
            <div class="grid-item"></div>
            <div class="grid-item"></div>
            <div class="grid-item"></div>
            <div class="grid-item"></div>
            <div class="grid-item"></div>
            <div class="grid-item"></div>
            <div class="grid-item"></div>
            <div class="grid-item"></div>
            <div class="grid-item"></div>
            <div class="grid-item"></div>
            <div class="grid-item"></div>
        </div>
        <div class="loading-text">翻译中...</div>
    </div>
</section>

<!-- Quick Translator -->




<!-- CopyRight -->

<section id="copyRight">
    <div class="container">
        <div class="row text-center">
            <p>
                All Rights Reserved &copy; Guangzhou LangPro, Co., Ltd. | By Langpro
            </p>
        </div>
    </div>
</section>

<!-- CopyRight -->

<!-- Scripts -->
<script src="js/wow.min.js"></script>
<script src="js/jquery-1.11.3.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.prettyPhoto.js"></script>
<script src="js/jquery.bxslider-rahisified.min.js"></script>
<script src="js/jquery.custom-file-input.js"></script>
<script src="js/bootstrap-select.min.js"></script>
<script src="js/custom.js"></script>
<script>
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
    const input = document.getElementById('lang-input');
    const output = document.getElementById('lang-output');
    const detection = document.getElementById('lang-detection');
    const outPut = document.getElementById('outPutLanguage');
    const change = document.getElementById('change-language');
    const loadingOverlay = document.getElementById('loadingOverlay');
    function checkLanguage(event) {
        const regexChinese = /[\u4e00-\u9fa5]/; // 匹配中文字符范围
        const regexEnglish = /[a-zA-Z]+/; // 匹配英文字母
        const regexJapanese = /[\u3041-\u30ff\uff61-\uffdc]+/; // 匹配日本汉字（平假名）

        if (regexChinese.test(event.target.value)) {
            console.log("输入内容包含中文");
            changeLanguage('cn');
            changeOutLanguage('en');
        } else if (regexEnglish.test(event.target.value)) {
            console.log("输入内容为英文");
            changeLanguage('en');
            changeOutLanguage('cn');
        } else if (regexJapanese.test(event.target.value)) {
            console.log("输入内容为日语");
            changeLanguage('jp');
            changeOutLanguage('cn');
        } else {
            console.log("无法确定输入内容所属语言类型");
        }
    }
    function changeLanguage(code) {
        console.log(code+"12121");
        detection.value = code ;
        console.log(detection.value+"323232");
        for (var i = 0; i < detection.options.length; i++) {
            detection.options[i].selected = false;
        }
        for (var i = 0; i < detection.options.length; i++) {
            if (detection.options[i].value === code) {
                console.log(code+"333333");
                console.log(detection.options[i].selected+"9999");
                detection.options[i].selected = true;
                break;
            }
        }
    }
    function changeOutLanguage(code) {
        console.log(code+"12121");
        outPut.value = code ;
        console.log(outPut.value+"323232");
        for (var i = 0; i < outPut.options.length; i++) {
            outPut.options[i].selected = false;
        }
        for (var i = 0; i < outPut.options.length; i++) {
            if (outPut.options[i].value === code) {
                console.log(code+"333333");
                console.log(outPut.options[i].selected+"9999");
                outPut.options[i].selected = true;
                break;
            }
        }
    }
    $('#change-language').click(function(){
        var out = detection.value
        detection.value = outPut.value
        outPut.value = out
        changeLanguage(detection.value);
        changeOutLanguage(outPut.value);
    })
    $('#submit').click(function(){
        var inputLanguage = detection.value;
        var outputLanguage = outPut.value;
        var input = $('#lang-input').val();
        if(input==''){
            alert('原文不能为空！！');
            return;
        }
        if(inputLanguage==''){
            alert('请选择原语言！！');
            return;
        }
        if(outputLanguage==''){
            alert('请选择目标语言！！');
            return;
        }
        if(inputLanguage==outputLanguage){
            alert('原语言和目标语言不能一样！！');
            return;
        }
        loadingOverlay.style.display = 'flex';
        var data = new Object();
        data.inputLanguage = inputLanguage;
        data.outputLanguage   = outputLanguage;
        data.input = input;
        $.ajax({
            type: "post",
            url: "/transfer",
            data:data,
            dataType: "json",

            success: function(msg) {
                loadingOverlay.style.display = 'none';
                if(msg.code==0){
                    if(msg.data==-1){
                        alert('服务器繁忙，请稍后再试')
                    }else{
                        console.log(msg)
                        output.value=msg.data
                    }
                }else{
                    alert('服务器繁忙，请稍后再试')
                }


            }
        })
    })
    input.addEventListener('keyup', checkLanguage);
</script>
</body>
</html>
